@import "ui-variables";

@emulator-view-width: 390px;
@nav-height: 36px;

.emulator-view {
  overflow: scroll;

  .nav {
    position: absolute;
    z-index: 2;
    width: @emulator-view-width;
    line-height: @nav-height;
    color: gray;
    background-color: rgb(51, 51, 51);

    font-size: 16px;

    .glyphicon-refresh {
      position: absolute;
      left: 0px;
      line-height: @nav-height;
      margin: 0px 5px;
    }

    .address {
      margin-left: 30px;
    }

    .glyphicon-remove {
      position: absolute;
      right: 0px;
      line-height: @nav-height;
      margin: 0px 5px;
    }
  }

  .device {
    width: @emulator-view-width; height: 813px;
    background-image: url('atom://atwork-qdt/images/device.png');
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;

    top: @nav-height;
  }

  .device-content {
    position: absolute;
    border: none;
    top: 116px;
    left: 36px;
    width: 320px;
    height: 569px;
    overflow: hidden;
    background-color: #fff;
  }

  .control {
    position: relative;
    top: 36px;
  }

  .resize-handle{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 3;
  }

  &[data-show-on-left-side='true'] .resize-handle {
    right: -5px;
  }

  &[data-show-on-left-side='false'] .resize-handle {
    left: -5px;
  }


}
